Using the CSS white-space Property
The white-space property in CSS controls how whitespace inside an element is handled. It affects text wrapping, line breaks, and whether sequences of spaces are collapsed or preserved.
normal: Collapses multiple spaces into one, and text wraps to the next line as needed (default behavior).nowrap: Collapses spaces but prevents text from wrapping to the next line.pre: Preserves spaces and line breaks exactly as in the source (like the<pre>element).pre-wrap: Preserves spaces and line breaks, but allows text to wrap to the next line if necessary.pre-line: Collapses multiple spaces into one but preserves line breaks.
Using white-space: pre ensures that spaces and line breaks in your text are rendered exactly as written in the HTML, which is useful for code snippets, poetry, or formatted text.
With pre-wrap, whitespace is preserved and long lines wrap within the container, combining the benefits of pre and normal wrapping behavior.
white-spacecontrols how spaces and line breaks are handled inside elements.Use
preorpre-wrapfor code blocks or preformatted text.Use
nowrapto prevent wrapping in menus, buttons, or inline labels.pre-lineis useful when you want line breaks preserved but still collapse extra spaces.